<template>
  <div class="app-container">
    <div>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
        <el-form-item label="查询日期" prop="checkDate">
          <el-date-picker v-model="queryParams.checkDate" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="检查来源" prop="checkSource">
          <el-select multiple v-model="queryParams.checkSource" placeholder="检查来源" clearable>
            <el-option v-for="item in dict.type.list_danger_level" :key="item.dictLabel" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="记录类型" prop="recordType">
          <el-select multiple v-model="queryParams.recordType" placeholder="记录类型" clearable>
            <el-option v-for="item in dict.type.list_danger_level" :key="item.dictLabel" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="隐患等级" prop="dangerLevel">
          <el-select multiple v-model="queryParams.dangerLevel" placeholder="隐患等级" clearable>
            <el-option v-for="item in dict.type.list_danger_level" :key="item.dictLabel" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传人" prop="uploadPeople">
          <el-select multiple v-model="queryParams.uploadPeople" placeholder="上传人" clearable>
            <el-option v-for="item in dict.type.list_danger_level" :key="item.dictLabel" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查区域">
          <treeselect style="width: 260px" v-model="queryParams.checkArea" :options="deptOptions"
            :default-expand-level="100" placeholder="请选择检查区域" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div style="
          width: 100%;
          background-color: rgb(244, 246, 248);
          height: 40px;
          line-height: 40px;
        ">
        共 {{ total }} 张照片
      </div>
      <div class="body ub ub-wrap">
        <div class="block" v-for="item in imgList" :key="item.id" @click="openViewer(item)">
          <el-image class="image" :src="item.cover" fit="fill" :lazy="true"></el-image>
          <div class="label">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <zj-viewer v-if="viewerVisible" :visible.sync="viewerVisible" :imgList="imgList" :selectItem="selectItem"></zj-viewer>
  </div>
</template>
<script>
import { getPreMonthDate } from "@/utils"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { mapState } from "vuex";
import { listImg } from "@/api/biz/imgAlbum/imgAlbum.js";
import ZjViewer from "./components/zjViewer.vue"
const audioImg = require("@/assets/images/audio.png");
const videoImg = require("@/assets/images/video.png");
export default {
  components: {
    Treeselect,
    ZjViewer,
  },
  dicts: ["list_danger_level"], //隐患等级
  data() {
    return {
      viewerVisible: false,
      projectId: this.$store.state.app.selectData,
      // 查询参数
      queryParams: {
        checkDate: [],
        checkSource: [],
        recordType: [],
        dangerLevel: [],
        uploadPeople: [],
        checkArea: null,
      },
      deptOptions: [],
      imgList: [
        { id: 1, url: "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg", name: "名称1", type: "img" },
        { id: 2, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称2", type: "img" },
        { id: 5, url: "https://www.runoob.com/try/demo_source/movie.mp4", name: "名称5", type: "video" },
        { id: 3, url: "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg", name: "名称3", type: "img" },
        { id: 6, url: "https://www.runoob.com/try/demo_source/movie.mp4", name: "名称6", type: "video" },
        { id: 4, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称4", type: "img" },
        { id: 7, url: "https://www.runoob.com/try/demo_source/horse.ogg", name: "名称7", type: "audio" },
        { id: 8, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称8", type: "img" },
        { id: 9, url: "https://www.runoob.com/try/demo_source/horse.ogg", name: "名称9", type: "audio" },
        { id: 10, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称8", type: "img" },
        { id: 11, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称8", type: "img" },
        { id: 12, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称8", type: "img" },
        { id: 13, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称8", type: "img" },
        { id: 14, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称8", type: "img" },
        { id: 15, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称8", type: "img" },
        { id: 16, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称8", type: "img" },
        { id: 17, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称8", type: "img" },
        { id: 18, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称8", type: "img" },
        { id: 19, url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", name: "名称8", type: "img" },
      ],
      total: 0,
      selectItem: {},
    };
  },
  computed: {
    ...mapState(["app"]),
  },
  created() {
    const now = new Date();
    const date1 = this.parseTime(now, '{y}-{m}-{d}');
    const date2 = getPreMonthDate(date1)
    this.queryParams.checkDate = [date2, date1];
    if (this.projectId) {
      this.getList()
    }
  },
  watch: {
    app: {
      handler(newVal, oldVal) {
        this.queryParams.projectId = newVal.selectData;
        this.getList();
      },
      deep: true,
    },
  },
  methods: {
    getList() {
      listImg(this.queryParams).then((data) => {
        // this.imgList = data.rows
        // this.total = data.total
        this.imgList.forEach((item, index) => {
          item.index = index;
          if(item.type == 'img'){
            item.cover = item.url;
          }else if(item.type == 'audio'){
            item.cover = audioImg;
          }else if(item.type == 'video'){
            item.cover = videoImg;
          }
        })
        this.total = 4
        // if (this.imgList != false) {
        //   this.imgList.forEach((item) => {
        //     item.url = process.env.VUE_APP_MINIO_BASE_API + "/" + item.bucket + "/" + item.realName
        //   })
        // }
      })
    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    openViewer(item){
      this.selectItem = item;
      this.viewerVisible = true;
    },
  },
};
</script>
<style scoped lang="scss">
.app-container {
  ::v-deep .vue-treeselect {
    height: 32px;

    .vue-treeselect__control {
      height: 32px;
    }

    .vue-treeselect__input-container {
      height: 32px;
    }
  }

  .body {
    padding: 5px;

    .block {
      width: 100px;
      height: 150px;
      margin: 5px;
      cursor: pointer;
      .image {
        width: 100%;
        height: 120px;
      }
      .label{
        text-align: center;
      }
    }
  }

}
</style>
